<template>
  <div class="order-detail">
    <el-card class="mb-4">
      <template #header>
        <div class="card-header">
          <span class="font-bold">订单基本信息</span>
        </div>
      </template>
      <el-descriptions :column="3" border >
        <template slot="extra">
          <el-button type="danger" v-if="orderInfo.status_value === 'paid'" @click="onRefund(orderInfo)">退款</el-button>
          <el-button type="primary" size="small" @click="toBack">返回</el-button>
        </template>
        <el-descriptions-item label="订单号">{{ orderInfo.order_no }}</el-descriptions-item>
        <el-descriptions-item label="状态">
          <el-tag type="primary" v-if="orderInfo.status_value === 'wait_pay'">待支付</el-tag>
          <el-tag type="info" v-if="orderInfo.status_value === 'canceled'">已取消</el-tag>
          <el-tag type="success" v-if="orderInfo.status_value === 'paid'">已支付</el-tag>
          <el-tag type="error" v-if="orderInfo.status_value === 'refunded'">已退款</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="成人">{{ orderInfo.adult_count }}</el-descriptions-item>
        <el-descriptions-item label="儿童">{{ orderInfo.child_count }}</el-descriptions-item>
        <el-descriptions-item label="6岁以下">{{ orderInfo.childs_count }}</el-descriptions-item>
        <el-descriptions-item label="费用">{{ orderInfo.amount }}</el-descriptions-item>
        <el-descriptions-item label="下单时间">{{ orderInfo.create_time }}</el-descriptions-item>
        <el-descriptions-item label="付款时间">{{ orderInfo.pay_time === 'Invalid Date' ? '' : orderInfo.pay_time }}</el-descriptions-item>
        <el-descriptions-item label="付款方式">{{ orderInfo.pay_way }}</el-descriptions-item>
        <el-descriptions-item label="联系人">{{ orderInfo.contact_name }}</el-descriptions-item>
        <el-descriptions-item label="联系方式">{{ orderInfo.contact_phone }}</el-descriptions-item>
        <el-descriptions-item label="备注" :span="6">{{ orderInfo.contact_remark }}</el-descriptions-item>
        <el-descriptions-item label="是否潜水">
          <el-tag type="success" v-if="orderInfo.is_diving === 1">是</el-tag>
          <el-tag type="info" v-if="orderInfo.is_diving === 0">否</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="潜水免责声明">
          <el-link v-if="orderInfo.diving_file" :href="orderInfo.diving_file" target="_blank">点击下载</el-link>
        </el-descriptions-item>
        <el-descriptions-item label="特殊需要或饮食忌口">{{ orderInfo.eat_remark }}</el-descriptions-item>
        <el-descriptions-item label="了解体途径">{{ orderInfo.source }}</el-descriptions-item>
        <el-descriptions-item label="电话确认">
          <el-tag type="success" v-if="orderInfo.needs_confirmation === 1">需要</el-tag>
          <el-tag type="info" v-if="orderInfo.needs_confirmation === 0">不需要</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="IP">{{ orderInfo.ip }}</el-descriptions-item>
        <el-descriptions-item label="国家">{{ orderInfo.country }}</el-descriptions-item>
      </el-descriptions>
    </el-card>
    <el-card class="mb-4">
      <template #header>
        <div class="card-header">
          <span class="font-bold">行程信息信息</span>
        </div>
      </template>
      <el-descriptions :column="3" border >
        <el-descriptions-item label="行程项目">{{ orderInfo.ship.name }}</el-descriptions-item>
        <el-descriptions-item label="行程开始时间">{{ orderInfo.cycle.start_time }}</el-descriptions-item>
        <el-descriptions-item label="行程时长">{{ orderInfo.cycle.duration }}</el-descriptions-item>
      </el-descriptions>
    </el-card>
    <el-card class="mb-4" v-if="orderInfo.role === 2">
      <template #header>
        <div class="card-header">
          <span class="font-bold">代理商基本信息</span>
        </div>
      </template>
      <el-descriptions :column="3" border >
        <el-descriptions-item label="代理商">{{ orderInfo.user.nickname }}</el-descriptions-item>
        <el-descriptions-item label="代理商邮箱">{{ orderInfo.user.email }}</el-descriptions-item>
        <el-descriptions-item label="代理商电话">{{ orderInfo.user.phone }}</el-descriptions-item>
      </el-descriptions>
    </el-card>

    <el-card>
      <template #header>
        <div class="card-header">
          <span class="font-bold">乘客信息</span>
        </div>
      </template>
      <el-table :data="passengerList" border style="width: 100%">
        <el-table-column label="姓名" prop="nickname" />
        <el-table-column label="联系电话" prop="phone" />
        <el-table-column label="乘客类型" prop="is_adult">
          <template slot-scope="scope">
            <el-tag type="success" v-if="scope.row.is_adult === 1">成人</el-tag>
            <el-tag type="info" v-if="scope.row.is_adult === 0">儿童</el-tag>
          </template>
        </el-table-column>
      </el-table>
    </el-card>


    <!-- 退款弹窗 -->
    <el-dialog
        title="订单退款"
        :visible.sync="refundDialogVisible"
        width="500px"
        :close-on-click-modal="false"
    >
      <el-form
          ref="refundForm"
          :model="refundForm"
          :rules="refundRules"
          label-width="100px"
          size="small"
      >
        <el-form-item label="订单号">
          <span>{{ currentOrder.order_no }}</span>
        </el-form-item>
        <el-form-item label="订单金额">
          <span>${{ currentOrder.amount }}</span>
        </el-form-item>
        <el-form-item label="退款金额" prop="amount">
          <el-input-number
              v-model="refundForm.amount"
              :min="0"
              :max="currentOrder.amount"
              :precision="2"
              :step="1"
              style="width: 200px"
          ></el-input-number>
        </el-form-item>
        <el-form-item label="退款原因" prop="note">
          <el-input
              type="textarea"
              v-model="refundForm.note"
              :rows="3"
              placeholder="请输入退款原因"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="refundDialogVisible = false">取 消</el-button>
        <el-button type="primary" :loading="refundLoading" @click="submitRefund">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {http} from "@/api";

export default {
  name: 'OrderDetail',
  data() {
    return {
      orderInfo: {
        order_no: '',
        user: {},
        ship: {
          name: ''
        },
        status_value: '',
        adult_count: 0,
        child_count: 0,
        childs_count: 0,
        amount: 0,
        create_time: '',
        pay_time: '',
        pay_way: '',
        cycle: {
          start_time: '',
          duration: ''
        },
        contact_name: '',
        contact_phone: '',
        contact_remark: '',
        is_diving: 0,
        diving_file: '',
        eat_remark: '',
        source: '',
        needs_confirmation: 0,
        ip: '',
        country: ''
      },
      passengerList: [],

      // 退款相关
      refundDialogVisible: false,
      refundLoading: false,
      currentOrder: {},
      refundForm: {
        amount: 0,
        note: ''
      },
      refundRules: {
        amount: [
          { required: true, message: '请输入退款金额', trigger: 'blur' },
          { type: 'number', message: '退款金额必须为数字' }
        ],
        note: [
          { required: true, message: '请输入退款原因', trigger: 'blur' },
          { min: 2, max: 200, message: '长度在 2 到 200 个字符', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    this.getOrderDetail()
  },
  methods: {
    async getOrderDetail() {
      try {
        const orderId = this.$route.query.orderId
        const res = await http.order.read(orderId)
        console.log(res)
        this.orderInfo = res.data
        this.passengerList = res.data.userList || []
      } catch (error) {
        console.error('Failed to fetch order detail:', error)
      }
    },
    toBack() {
      this.$router.go(-1)
    },
    onRefund(row) {
      this.currentOrder = {
        ...row
      }
      this.refundForm.amount = row.amount
      this.refundDialogVisible = true
    },
    async submitRefund() {
      try {
        await this.$refs.refundForm.validate()
        this.refundLoading = true
        if (this.orderInfo.pay_way === 'ALIPAY_CN') {
          await http.payment.alipayRefund({
            orderId: this.currentOrder.id,
            amount: this.refundForm.amount,
            note: this.refundForm.note
          })
        } else if (this.orderInfo.pay_way === 'paypal') {
          await http.payment.paypalRefund({
            orderId: this.currentOrder.id,
            amount: this.refundForm.amount,
            note: this.refundForm.note
          })
        }

        this.$message.success('退款申请成功')
        this.refundDialogVisible = false
        this.toBack()
      } finally {
        this.refundLoading = false
      }
    }

  }
}
</script>

<style scoped lang="scss">
.order-detail {
  height: 100%;
  overflow: auto;
  .mb-4 {
    margin-bottom: 16px;
  }

  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}
</style>
